﻿import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1

import Material 0.1 as Mater
import Material.Extras 0.1 as MaterExt

Item {
    id: demo
    width: 640
    height: 480

    property var components: ["Button","TextField", "Slider","ProgressBar","CheckBox",
        "RadioButton","Switch","ComboBox","TabView","SpinBox"
    ]
    property string selectedComponent: components[0]
    function addData(name){
        listmodel.append({"textData":name,"selected":listmodel.count == 0?true:false})
    }

    function setcurrentItem(){
        for(var i = 0;i<listmodel.count;i++){//listmodel.get(i).selected
            listmodel.get(i).selected = (i == listView1.currentIndex)?true:false
        }
    }

    ListModel{
        id:listmodel
    }

    Component.onCompleted: {
        listView1.currentIndex = 0;
        for(var i = 0;i<demo.components.length;i++){
            demo.addData(demo.components[i])
        }
        demo.setcurrentItem()
        pageLoader.source = Qt.resolvedUrl("baseControls/%.qml").arg(selectedComponent.replace(" ", ""))
    }

    ListView {
        id: listView1
        width: 116
        property bool isChecked: false
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        contentWidth: 150
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0
        model: listmodel
        clip: true
        delegate: Rectangle {
            property bool ishover: false
            id:deleRet
            width:150
            height:30
            anchors.bottomMargin: 5
            Rectangle{
                id:mainret
                anchors.fill: parent
                color:"transparent"
                Behavior on color{ ColorAnimation{
                        id:colorani
                        to: deleRet.ishover?"lightsteelblue":"transparent"
                        duration: 350
                    }
                }

                Rectangle{
                    id:bg
                    color:"lightsteelblue"
                    anchors.fill: parent
                    opacity:selected?1:0
                    Behavior on opacity { NumberAnimation { duration: 350; } }
                }

                Text{
                    id:text
                    anchors.centerIn: parent
                    text: textData
                    color: selected?"white":"#414141"
                }
                MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: {
                        deleRet.ishover = true
                        parent.color="lightsteelblue"
                        text.color = "white"
                    }
                    onExited: {
                        deleRet.ishover = false
                        parent.color="transparent"
                        text.color = selected?"white":"#414141"
                    }

                    onClicked: {
                        listView1.currentIndex = index
                        selectedComponent = textData
                        demo.setcurrentItem()
                        pageLoader.source = Qt.resolvedUrl("baseControls/%.qml").arg(selectedComponent.replace(" ", ""))
                    }
                }
            }
        }
    }

    Rectangle{
        id:mainflick
        color:"white";//Qt.rgba(97/255,178/255,244/255,1)
        width:200
        height:parent.height
        anchors{
            left:listView1.right
            right:parent.right
            top:parent.top
            bottom:parent.bottom
        }
        Loader {
            anchors.fill: parent;
            id: pageLoader
        }
    }
}
